<template>
  <div>
    <footer class="bg-[#052B18] text-gray-300 border-t-6 border-[#6F431F]">
      <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          <!-- 关于我 -->
          <div class="text-center sm:text-left" @click="navigateTo('/about')">
            <h3 class="text-lg font-semibold mb-4 hover:text-bsr cursor-alias">
              关于我
            </h3>
            <p class="text-sm hover:text-bsr cursor-alias">
              一个热爱技术、热爱生活的开发者，记录学习与成长的点滴。
            </p>
          </div>

          <!-- 联系方式 -->
          <div class="text-center sm:text-left">
            <h3 class="text-lg font-semibold mb-4">联系方式</h3>
            <ul class="space-y-2">
              <li class="flex items-center justify-center sm:justify-start">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5 mr-2"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                  />
                </svg>
                <a class="text-white"
                  >1942343023@qq.com</a
                >
              </li>
              <li class="flex items-center justify-center sm:justify-start">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5 mr-2"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
                  />
                </svg>
                <a
                  href="https://github.com"
                  target="_blank"
                  class="hover:text-white"
                  >GitHub</a
                >
              </li>
            </ul>
          </div>

          <!-- 版权信息 -->
          <div class="text-center sm:text-left">
            <h3 class="text-lg font-semibold mb-4">版权信息</h3>
            <p class="text-sm">
              © {{ new Date().getFullYear() }} My Personal Site.<br />
              All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts"></script>

<style></style>
